import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, RefreshControl } from 'react-native';
import NavigationBar from 'react-native-navbar';
import Theme from '../config/Theme';
import ImageButton from '../component/ImageButtonWithText';
import Px2dp from '../util/px2dp';
import Icon from 'react-native-vector-icons/Ionicons';
import Drawer from 'react-native-drawer';
import UserInfo from './UserInfo';

export default class TikuanjiFragment extends Component {

  constructor(props) {
    super(props);
    this.state = {
      refreshing: true,
    };
  }

  static defaultProps = {

  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        refreshing: false,
      });
    }, 2000);
  }
  _onRefresh() {

  }

  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };
  render() {
    const rightButtonConfig = {
      title: '收益明细',
      tintColor: 'white',
      handler: () => alert('hello!'),
    };

    const titleConfig = {
      title: '提款机',
      tintColor: 'white'
    };
    return (
      <Drawer
        ref={(ref) => this._drawer = ref}
        content={<UserInfo closePage={() => {
          this.closeControlPanel()
        }} />}
      >
        <View style={styles.container}>
          <NavigationBar style={styles.toobar}
            title={titleConfig}
            rightButton={rightButtonConfig}
            leftButton={<ImageButton
              color="white"
              icon="md-person"
              imgSize={Px2dp(20)}
              onPress={() => {
                this.openControlPanel()
              }}
              btnStyle={{ width: 50 }}
            />} />
          <ScrollView style={{ flex: 1, backgroundColor: 'white' }} refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this._onRefresh.bind(this)}
              colors={['red', '#ffd500', '#0080ff', '#99e600']}
              tintColor={Theme.themeColor}
              title="Loading..."
              titleColor={Theme.themeColor}
            />
          } >
            <View style={styles.topBlock}>
              <Text style={{ color: 'white', fontSize: 12 }}>账户余额（元）</Text>
              <Text style={{ color: 'white', fontSize: 50 }}>1.097</Text>
              <Text style={{ color: 'white', fontSize: 12, marginTop: 20 }}>账户余额（元）</Text>
              <Text style={{ color: 'white', fontSize: 18 }}>1.097</Text>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
                <View style={{ flexDirection: 'column', alignItems: 'center', flex: 1 }}>
                  <Text style={{ color: 'white', fontSize: 12, marginTop: 20 }}>今日收益（元）</Text>
                  <Text style={{ color: 'white', fontSize: 18 }}>+0.000</Text>
                </View>
                <View style={{ width: 0.5, height: 30, backgroundColor: 'white', alignSelf: 'center' }}></View>
                <View style={{ flexDirection: 'column', alignItems: 'center', flex: 1 }}>
                  <Text style={{ color: 'white', fontSize: 12, marginTop: 20 }}>昨日收益（元）</Text>
                  <Text style={{ color: 'white', fontSize: 18 }}>+0.000</Text>
                </View>
              </View>
            </View>

            <View style={{ backgroundColor: 'gainsboro' }}>
              <TouchableOpacity onPress={() => alert('提现啦!')}>
                <View style={{ backgroundColor: 'orangered', borderRadius: 5, margin: 15, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 10 }}>
                  <Icon name="ios-beer-outline" size={30} color="white" />
                  <Text style={{ color: 'white', marginLeft: 10 }}>立即提现</Text>
                </View>
              </TouchableOpacity>
            </View>

            <TouchableOpacity onPress={() => alert('分享!')}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', height: 50, alignItems: 'center', padding: 10, backgroundColor: 'white', borderBottomColor: 'gainsboro', borderBottomWidth: 0.5 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Icon name="ios-happy" size={30} color="green" />
                  <Text style={{ marginLeft: 10 }}>转发赚钱</Text>
                </View>
                <View style={{ flexDirection: 'row-reverse', alignItems: 'center' }}>
                  <Icon name="ios-arrow-forward" size={30} color="gray" />
                  <Text style={{ marginRight: 10 }}>转发文章，立即赚钱</Text>
                </View>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => alert('收徒!')}>
              <View style={{ borderBottomColor: 'gainsboro', borderBottomWidth: 0.5, flexDirection: 'row', justifyContent: 'space-between', height: 50, alignItems: 'center', padding: 10, backgroundColor: 'white' }}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Icon name="ios-happy" size={30} color="green" />
                  <Text style={{ marginLeft: 10 }}>转发赚钱</Text>
                </View>
                <View style={{ flexDirection: 'row-reverse', alignItems: 'center' }}>
                  <Icon name="ios-arrow-forward" size={30} color="gray" />
                  <Text style={{ marginRight: 10 }}>转发文章，立即赚钱</Text>
                </View>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => alert('攻略!')}>
              <View style={{ borderBottomColor: 'gainsboro', borderBottomWidth: 0.5, flexDirection: 'row', justifyContent: 'space-between', height: 50, alignItems: 'center', padding: 10, backgroundColor: 'white' }}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Icon name="ios-happy" size={30} color="green" />
                  <Text style={{ marginLeft: 10 }}>转发赚钱</Text>
                </View>
                <View style={{ flexDirection: 'row-reverse', alignItems: 'center' }}>
                  <Icon name="ios-arrow-forward" size={30} color="gray" />
                  <Text style={{ marginRight: 10 }}>转发文章，立即赚钱</Text>
                </View>
              </View>
            </TouchableOpacity>
          </ScrollView >
        </View>
      </Drawer>




    );

  }

}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
    },
    toobar: {
      backgroundColor: Theme.actionBar.backgroundColor,
    },
    topBlock: {
      backgroundColor: 'orangered',
      width: Theme.width,
      height: 250,
      alignItems: 'center',
      paddingTop: 25
    }
  }
);